---
name: FocalReveal
route: /focal-reveal
menu: Focal motions
---

import { Playground, Props } from 'docz';
import { build } from './styled';
import FocalReveal from '../index';

# FocalReveal

Will reveal an element around a focal element. Defaults to using `width` and `height`.
This component requires the use of a [FocalTarget](/focal-target) to mark the focal element.

## Usage

```js
import Motion, { FocalReveal } from '@element-motion/core';
```

### With clip path

- ✅ Performant
- ✅ Doesn't affect page flow (elements don't move during motion)
- ❌ Clips everything outside of the element (read: box shadow disappears during the motion)
- ❌ Doesn't work in IE11

<Playground>{() => build(200, 200, 'horizontal', 'center', true)}</Playground>

### With width and height

- ✅ Looks good when used with box shadow
- ❌ Affects page flow (elements move during motion)
- ❌ Not performant

<Playground>{() => build(200, 200, 'horizontal', 'center')}</Playground>

## Props

<Props of={FocalReveal} />
